import {
    EditableProTable,
} from '@ant-design/pro-components';
import { Button, Empty, Form, Space } from 'antd';
import React, { useRef, useState } from 'react';
import "./index.scss"
import noData from '../../assets/images/noData.png'
const waitTime = (time = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};

export default function EditTable({ columns = [], dataSource, page, handleDelBatch, form, handleDel, total, handleSave, handleDataChange, handlePage }) {
    const defaultColumns = [...columns, {
        title: '操作',
        valueType: 'option',
        width: 150,
        align: 'center',
        render: (text, record, _, action) => [
            <a
                key="editable"
                onClick={() => {
                    action?.startEditable?.(record.UUID);
                }}
            >
                编辑
            </a>,
            <a
                key="delete"
                onClick={() => handleDel(record)}
            >
                删除
            </a>
        ],
    }]
    const [editableKeys, setEditableRowKeys] = useState([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const actionRef = useRef();
    const handleSelChange = (selectedRowKeys, selectedRows) => {
        // console.log(selectedRowKeys, selectedRows)
        setSelectedRowKeys(selectedRowKeys)
    }
    const rowSelection = {
        // selectedRowKeys,
        onChange: handleSelChange,
    };
    return (
        <>
            {selectedRowKeys.length > 0 && <Space>
                <div className="tableHeader">
                    <div>
                        <Button type="primary" danger onClick={() => {
                            handleDelBatch(selectedRowKeys)
                            setSelectedRowKeys([])
                        }}>删除</Button>
                    </div>
                </div>
            </Space>}
            <EditableProTable
                rowKey="UUID"
                bordered
                borderColor="#b0afaf"
                style={{ marginTop: selectedRowKeys.length > 0 && 20, borderColor: '#b0afaf !important' }}
                scroll={{
                    y: 280
                }}
                actionRef={actionRef}
                // 默认的新建按钮
                recordCreatorProps={{
                    position: 'top',
                    record: () => ({ UUID: (Math.random() * 1000000).toFixed(0), AMOUNT: 0, INCOME_AMOUNT: 0, PROFIT_AMOUNT: 0, CASH_AMOUNT: 0 })
                }}
                columns={defaultColumns}
                request={async () => ({
                    data: dataSource,
                    total: total,
                    success: true,
                })}
                rowSelection={rowSelection}
                alwaysShowAlert={false}
                tableAlertRender={false}
                tableAlertOptionRender={false}
                value={dataSource}
                onChange={(value) => handleDataChange(value)}
                pagination={page.pageNum ? {
                    showSizeChanger: true,
                    showQuickJumper: true,
                    total: total,
                    current: page.pageNum,
                    pageSize: page.pageSize,
                    showTotal: ((total) => `共计${total}条`),
                    onChange: handlePage
                } : false}
                editable={{
                    editableKeys,
                    form,
                    onSave: async (key, row, originRow, newLine) => {
                        await handleSave(key, newLine, row)
                    },
                    onChange: setEditableRowKeys,
                    actionRender: (row, config, dom) => [dom.save, dom.cancel],
                }}
                locale={{
                    emptyText: <Empty image={noData}></Empty>
                }}
            />
        </>
    );
};